<template>
    <div id="box">
        <!--头像登录-->
        <router-link to="/login/abc">
            <div class="mar">
                <div id="avator" class="fa fa-user-circle"></div>
                <p>登录</p>
            </div>
        </router-link>
        
        
        <!--底部广告-->
        <div id="bottom">
            <p>全球统一服务热线</p>
            <p>400 080 5000</p>
            <p> <span class="fa fa-volume-control-phone tel"></span>更多客服热线</p>
            <div id="list">
                <span>开元周游</span>
                <span>开元APP</span>
                <span>电脑版</span>
            </div>
        </div>
    </div>
</template>

<script>
export default {

}
</script>

<style lang='css' scoped>
    #box{
        width: 70vw;
        height: 100vh;
        /*border: 1px  solid  red;*/
        background-image: url(../../static/img/bg.png);
        background-size: 100% 100%;
        background-repeat: no-repeat;
        position: relative;
        overflow-x: hidden;
    }
    #avator{
        height: 74px;
        width: 74px;
        border-radius: 50%;
        color: #73a1ce;
        text-align: center;
        /*border: 1px solid black;*/
        line-height: 74px;
        font-size: 72px;
    }
  
    .mar{
        /*border: 1px solid black;*/
        text-align: center;
        margin: 60px auto;
    }
    .mar p{
        margin: 8px 0;
        font-size: 14px;
        color: #212020;
    }
    #bottom{
        /*border: 1px solid black;*/
        position: absolute;
        left: 28px;
        bottom: 50px;
    }
    #bottom p{
        margin: 3px 0;
    }
    #bottom p:nth-of-type(1){
        color: #2d2c2c;
        font-size: 18px;
    }
    #bottom p:nth-of-type(2){
        color: #3d4145;;
        font-size: 30px;
        font-family:  "宋体";
        /*font-weight: 300;*/
    }
    #bottom p:nth-of-type(3){
        display: inline-block;
        color: #313131;
        font-size: 16px;
        font-family:  "Helvetica Neue",Helvetica,sans-serif;
        height: 38px;
        width: 200px;
        /*border: 1px  solid black;*/
        line-height: 38px;
        text-align: center;
        border-radius: 8px;
    }
    .tel{
        font-size: 20px;
        margin-right: 10px;
    }
    #list{
        /*display: flex;
        justify-content: space-around;*/
        font-size: 13px;
        margin-top: 5px;
        color: #313131;
    }
    #list span{
        margin-right: 15px;
    }
    a{
        text-decoration: none;
    }
</style>